<template>
	<div class="hotel-list">
		<div class="operate-bar" style="margin-top: 22px">
			<el-button
				size="small"
				type="primary"
				@click="editHotel({})"
			>
				新增酒店
			</el-button>
		</div>
		<el-table
			ref="table"
			:data="tableData"
			style="width: 100%"
			v-loading="loading"
		>
			<el-table-column
				prop="id"
				label="ID"
				width="90"
			>
				<template slot-scope="prop">
					<el-link
						type="primary"
						:href="prop.row.id | orderPage"
						:underline="false">{{prop.row.id}}
					</el-link>
				</template>
			</el-table-column>
			<el-table-column
				prop="name"
				label="酒店名称"
			>
			</el-table-column>
			<el-table-column
				prop="username"
				label="用户名称"
			>
			</el-table-column>
			<el-table-column
				prop="phone"
				label="手机号码"
				width="130"
			>
			</el-table-column>
			<el-table-column
				label="经纬度"
				min-width="100"
			>
				<template slot-scope="prop">
					<span>{{prop.row.lng + ',' + prop.row.lat}}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="create_time"
				label="创建时间"
				min-width="100"
			>
			</el-table-column>
			<el-table-column
				label="二维码"
				width="100"
			>
				<template slot-scope="prop">
					<template v-if="prop.row.qrcode">
						<el-popover
							placement="left"
							width="180"
							trigger="hover"
							popper-class="qrcode"
						>
							<el-image
								style="width: 180px;height: 180px;"
								:src="prop.row.qrcode | qrCode"
							></el-image>
							<el-button
								slot="reference"
								type="text"
								size="small"
							>
								查看
							</el-button>
						</el-popover>
						<el-link
							style="font-size: 12px;position: relative;top: -1px;margin-left: 10px"
							:underline="false"
							:href="prop.row.id | downloadHref"
							type="primary"
							target="_blank"
						>
							下载
						</el-link>
					</template>
					<el-button
						v-else
						type="text"
						size="small"
						@click="generateQRCode(prop.row, true)"
					>
						生成
					</el-button>
				</template>
			</el-table-column>
			<el-table-column
				prop="state"
				label="状态"
				width="70"
			>
				<template slot-scope="prop">
					<span>{{prop.row.state === 1 ? '停用' : '正常'}}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="操作"
				width="145"
			>
				<template slot-scope="prop">
					<el-button
						:type="prop.row.state !== 1 ? 'danger' : 'primary'"
						size="small"
						@click="switchState(prop.row)"
					>{{prop.row.state === 1 ? '启用' : '停用'}}
					</el-button>
					<el-button
						type="plain"
						size="small"
						@click="editHotel(prop.row)"
					>
						编辑
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagination">
			<el-pagination
				background
				layout="total, prev, pager, next, jumper"
				:page-size.sync="form.size"
				:current-page.sync="form.page"
				:total="total"
				:hide-on-single-page="true"
				@current-change="search"
			>
			</el-pagination>
		</div>
		<hotel-edit></hotel-edit>
	</div>
</template>

<script>
  import hotelEdit from './parts/edit'
  import {pageSize} from "../../constant";

  export default {
    name: "list"
    , data() {
      return {
        form: {
          page: 1
          , size: pageSize
        }
        , total: 0
        , tableData: []
        , loading: false
      }
    }
    , mounted() {
      this.search(1)
      this.$bus.$on('hotel-init', async (hotel) => {
        if (hotel.id) {
          this.loading = true
          await this.generateQRCode(hotel, false)
        }
        this.getList()
      })
    }
    , methods: {
      search(page) {
        this.form.page = page
        this.getList()
      }
      , getList() {
        this.loading = true
        this.$axios.get('/api/v1/hotels', {
            params: this.form
          })
          .then(res => {
            let {total = 0, data = []} = res
            this.total = total
            this.tableData = data
            this.tableData.forEach(item => {
              if (!item.qrcode)
                this.generateQRCode(item, false)
            })
          })
          .catch(() => {

          })
          .finally(() => {
            this.loading = false
          })
      }
      , switchState(row) {
        let action = row.state !== 1 ? '停用' : '启用'
        this.$confirm(`是否确认 ${action} ${row.username}?`, '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$axios.post('/api/v1/hotel/handel', {
                id: row.id,
                state: row.state === 2 ? 1 : 2
              })
              .then(res => {
                if (res.success) {
                  this.$message({
                    type: 'success'
                    , message: '操作成功'
                  })
                  this.getList()
                } else {
                  this.$message({
                    type: 'error'
                    , message: '操作失败' + res.msg
                  })
                }
              })
              .catch(() => {
                this.$message({
                  type: 'error'
                  , message: '操作失败'
                })
              })
          })
          .catch(() => {

          })
      }
      , editHotel(hotel) {
        this.$bus.$emit('hotel-edit', hotel)
      }
      , generateQRCode(row, showTip) {
        this.$set(row, 'loading', true)
        return this.$axios.post('/api/v1/hotel/qrcode/create', {
            hotel_id: row.id
          })
          .then(res => {
            let type = 'error',
              message = '生成二维码失败'
            if (res.success) {
              type = 'success'
              message = '生成二维码成功'
              this.$set(row, 'qrcode', res.url)
            }
            if (showTip) {
              this.$message({
                type: type,
                message: message
              })
            }
          })
      }
    }
    , filters: {
      orderPage(id) {
        return '#/hotel/order?id=' + id
      },
      qrCode(src) {
        if (/^https?:\/\//.test(src)) return
        return 'https://tonglingok.com' + src
      },
      downloadHref(id) {
        return 'https://tonglingok.com/api/v1/hotel/qrcode/download?hotel_id=' + id
      }
    }
    , components: {
      hotelEdit
    }
  }
</script>